<template>
  <div
    class="w-[100%] p-[20px] rounded-lg select-none shadow-sm border border-[#838282] border-solid"
  >
    <el-scrollbar max-height="460">
      <el-form label-width="auto">
        <el-form-item label="URL：">
          <el-input
            v-model="states.baseUrl"
            type="text"
            placeholder="请输入token请求地址"
          />
        </el-form-item>

        <el-form-item label="路径:" class="mt-[20px]">
          <el-input
            v-model="states.url"
            placeholder="例：/getToken"
            class="input-with-select"
          >
            <template #prepend>
              <el-select
                v-model="states.method"
                placeholder="请求方式"
                style="width: 115px"
              >
                <el-option
                  v-for="(item, index) in SelecList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="参数:" class="mt-[20px]">
          <el-tabs
            v-model="activeName"
            @tab-change="tabChange"
            class="bg-[#232324] w-[600px]"
          >
            <el-tab-pane label="Header" name="Header" class="bg-[#232324]">
              <el-table
                :data="headersValue"
                style="width: 100%"
                class="mb-[20px]"
                max-height="180"
                header-row-class-name="headerClass"
              >
                <el-table-column prop="Key" label="Key" width="180">
                  <template #default="scope">
                    <el-input v-model="scope.row.Key" />
                  </template>
                </el-table-column>
                <el-table-column prop="Value" label="Value" width="180">
                  <template #default="scope">
                    <el-input v-model="scope.row.Value" /> </template
                ></el-table-column>
                <el-table-column prop="address" label="操作">
                  <template #default="scope">
                    <el-button
                      size="small"
                      @click="
                        handlePlusHeader(scope.$index, scope.row, 'params')
                      "
                    >
                      +
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="
                        handleDeleteHeader(scope.$index, scope.row, 'params')
                      "
                    >
                      -
                    </el-button>
                  </template>
                </el-table-column>

                <template #empty>
                  <el-button
                    size="small"
                    @click="handlePlusHeader(0, {}, 'params')"
                  >
                    + 新增
                  </el-button>
                </template>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="Params" name="Params" class="bg-[#232324]">
            </el-tab-pane>
            <el-tab-pane label="Body" name="Body" class="bg-[#232324]">
              <el-radio-group
                v-model="bodyType"
                class="mb-[10px]"
                @change="changeType"
              >
                <el-radio :value="1">none</el-radio>
                <el-radio :value="2">form-data</el-radio>
                <el-radio :value="3">x-www-form-urlencoded</el-radio>
              </el-radio-group>
            </el-tab-pane>
            <el-table
              v-if="showTable && activeName != 'Header'"
              :data="queryParams"
              style="width: 100%"
              max-height="180"
              class="mb-[20px]"
              header-row-class-name="headerClass"
            >
              <el-table-column prop="Key" label="Key" width="180">
                <template #default="scope">
                  <el-input v-model="scope.row.Key" />
                </template>
              </el-table-column>
              <el-table-column prop="Value" label="Value" width="180">
                <template #default="scope">
                  <el-input v-model="scope.row.Value" /> </template
              ></el-table-column>
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <el-button
                    size="small"
                    @click="handlePlus(scope.$index, scope.row, 'params')"
                  >
                    +
                  </el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row, 'params')"
                  >
                    -
                  </el-button>
                </template>
              </el-table-column>

              <template #empty>
                <el-button size="small" @click="handlePlus(0, {}, 'params')">
                  + 新增
                </el-button>
              </template>
            </el-table>
          </el-tabs>
        </el-form-item>
        <QueryTest :request="states" @updateFilterMethod="updateFilterMethod" />
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onBeforeMount } from "vue";
import QueryTest from "./queryTest.vue";
import { emitter2 } from "@renderer/utils/event";
type PropsType = {
  request: any;
};

let props = withDefaults(defineProps<PropsType>(), {
  request: () => ({}),
});

const emit = defineEmits(["update:request"]);

const states = computed({
  get() {
    return props.request;
  },
  set(val) {
    emit("update:request", val);
  },
});

const activeName = ref("Params");
const SelecList = ["get", "post", "put", "delete", "patch"];
const bodyType = ref(3);
const showTable = ref(true);
const queryParams = ref([]);
const headersValue = ref([]);
const handleBodys = () => {
  let obj = {};
  if (bodyType.value == 2 && activeName.value == "Body") {
    states.value.ifFormData = true;
    queryParams.value.forEach((item) => {
      obj[item.Key] = item.Value;
    });
    return obj;
  } else {
    states.value.ifFormData = false;
    queryParams.value.forEach((item) => {
      obj[item.Key] = item.Value;
    });
    return obj;
  }
};
const handleParams = () => {
  let obj = {};
  queryParams.value.forEach((item) => {
    obj[item.Key] = item.Value;
  });
  return obj;
};
const handelHeaders = () => {
  let obj = {};
  headersValue.value.forEach((item) => {
    obj[item.Key] = item.Value;
  });
  return obj;
};

onMounted(() => {
  emitter2.on("tokenParamJson", (val) => {
    initAllDatas(val);
  });
});
onBeforeMount(() => {
  emitter2.removeAllListeners("tokenParamJson");
});
const initAllDatas = (val) => {
  if (Object.keys(val.headers).length > 0) {
    let headersArr = [];
    Object.keys(val.headers).forEach((it) => {
      headersArr.push({
        Key: it,
        Value: val.headers[it],
      });
    });
    headersValue.value = headersArr;
  }

  if (Object.keys(val.params).length > 0) {
    activeName.value = "Params";
    let paramsArr = [];
    Object.keys(val.params).forEach((it) => {
      paramsArr.push({
        Key: it,
        Value: val.params[it],
      });
    });
    queryParams.value = paramsArr;
  }
  if (Object.keys(val.data).length > 0) {
    activeName.value = "Body";
    let bodyArr = [];
    if (val.ifFormData) {
      bodyType.value = 2;
    }
    Object.keys(val.data).forEach((it) => {
      bodyArr.push({
        Key: it,
        Value: val.data[it],
      });
    });

    queryParams.value = bodyArr;
  }
};

watch(
  [() => activeName, () => queryParams.value, () => bodyType.value],
  () => {
    if (activeName.value == "Params") {
      states.value.params = handleParams();
      states.value.data = {};
      states.value.ifFormData = false;
    } else if (activeName.value == "Body") {
      states.value.data = handleBodys();
      states.value.params = {};
    }
    if (bodyType.value == 1) {
      states.value.data = {};
      states.value.ifFormData = false;
    }
  },

  {
    immediate: true,
    deep: true,
  }
);
watch(
  () => headersValue.value,
  () => {
    states.value.headers = handelHeaders();
  },
  {
    immediate: true,
    deep: true,
  }
);

const handlePlus = (index: number, item: any, type: string) => {
  queryParams.value.push({
    Key: "",
    Value: "",
  });
};
const handlePlusHeader = (index: number, item: any, type: string) => {
  headersValue.value.push({
    Key: "",
    Value: "",
  });
};
const handleDelete = (index: number, item: any, type: string) => {
  queryParams.value.splice(index, 1);
};
const handleDeleteHeader = (index: number, item: any, type: string) => {
  headersValue.value.splice(index, 1);
};
const changeType = () => {
  showTable.value = bodyType.value != 1;
};
const tabChange = () => {
  if (activeName.value == "Params") showTable.value = true;
  if (activeName.value == "Header") showTable.value = true;
  if (activeName.value == "Body") {
    changeType();
  }
};

const updateFilterMethod = (val) => {
  // console.log("val", val);
  states.value.filterMethods = val;
};
</script>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #232324 !important;
}
:deep(.el-table tr) {
  background-color: #232324 !important;
}
:deep(.el-table th.el-table__cell) {
  background: #39393e !important;
}

:deep(
    .el-input__wrapper,
    .el-input__inner,
    .el-input .el-input-group__prepend,
    .el-select .el-select__wrapper
  ) {
  background: #39393e !important;
}

:deep(.el-input-group__prepend) {
  background: #39393e !important;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: #646567 !important;
}

:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom-color: #646567 !important;
}
:deep(.el-table td.el-table__cell) {
  border-bottom-color: #646567 !important;
}
:deep(.el-table__inner-wrapper:before) {
  height: 0 !important;
}
</style>
